<template>
  <div class="profile-page">

    <div class="user-info">
      <div class="container">
        <div class="row">

          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="profile.image" class="user-img" />
            <h4>{{ profile.username }}</h4>
            <p>{{ profile.bio }}</p>

            <button v-if="isCurrentUser" class="btn btn-sm btn-outline-secondary action-btn"
              @click="$router.push({ name: 'settings' })">
              <i class="ion-gear-a"></i>
              &nbsp;
              Edit Profile Settings
            </button>

            <button v-else class="btn btn-sm btn-outline-secondary action-btn" @click="followCurrentUser">
              <i class="ion-plus-round"></i>
              &nbsp;
              {{ profile.following ? 'Follow' : 'Unfollow' }} {{ profile.username }}
            </button>
          </div>

        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <router-link
                  class="nav-link"
                  :class="{ 'active': $route.name === 'profile' }"
                  active-class="active"
                  exact
                  :to="{ name: 'profile' }"
                >
                  My Articles
                </router-link>
              </li>
              <li class="nav-item">
                <router-link
                  class="nav-link"
                  :class="{ 'active': $route.name === 'profile-favorited' }"
                  active-class="active"
                  exact
                  :to="{ name: 'profile-favorited' }"
                >
                  Favorited Articles
                </router-link>
              </li>
            </ul>
          </div>
          <router-view></router-view>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
  import { getProfile, deleteFollow, addFollow } from '@/api/user'
  import { getArticles } from '@/api/article'
  import { mapState } from 'vuex'

	export default {
		middleware: 'authenticated',
		name: 'UserProfile',
    data() {
      return {
        profile: {},
        username: this.$route.params.username,
        myArticles: [],
        favoritedArticles: []
      }
    },
    computed: {
      ...mapState({
        user: state => state.user
      }),
      isCurrentUser() {
        return this.user.username === this.profile.username
      }
    },
    async created() {
      await this.getProfile()
    },
    methods: {
      async getProfile() {
       const { data } =  await getProfile(this.username)

       this.profile = data.profile
      },
      async followCurrentUser() {
        const func = this.profile.following ? deleteFollow : addFollow
        const { data } = await func(this.username)

        this.profile = data.profile
      },
      
    }
	}
</script>

<style lang='less' scoped>

</style>